<template>
  <div class="bigdata">
    <div class="content_center" style="flex: 1">
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">年产量超减情况分析</span>
        </div>
        <div class="fuse-main">
          <ul class="yield">
            <li>
              <img src="@/assets/images/img57.png" />
              <p>日计划产量</p>
              <h1>{{ this.yield.dayPlan }}<span>吨</span></h1>
            </li>
            <li>
              <img src="@/assets/images/img56.png" />
              <p>月计划产量</p>
              <h1>{{ this.yield.monthPlan }}<span>万吨</span></h1>
            </li>
            <li>
              <img src="@/assets/images/img55.png" />
              <p>年计划产量</p>
              <h1>{{ this.yield.yearPlan }}<span>万吨</span></h1>
            </li>
          </ul>
          <ul class="manufacture">
            <li>
              <span>{{ productInfo[0].type }}</span>
              <el-progress
                :text-inside="true"
                :stroke-width="18"
                :percentage="Number(productInfo[0].percentage)"
              >
              </el-progress>
              <span>{{ productInfo[0].fact }}万吨</span>
              <span :class="productInfo[0].compare < '0' ? 'isred' : ''"
                >{{ productInfo[0].compare }}万吨</span
              >
            </li>
            <li>
              <span>{{ productInfo[1].type }}</span>
              <el-progress
                :text-inside="true"
                :stroke-width="18"
                :percentage="Number(productInfo[1].percentage)"
              >
              </el-progress>
              <span>{{ productInfo[1].fact }}万吨</span>
              <span :class="productInfo[1].compare < '0' ? 'isred' : ''"
                >{{ productInfo[1].compare }}万吨</span
              >
            </li>
            <li>
              <span>{{ productInfo[2].type }}</span>
              <el-progress
                :text-inside="true"
                :stroke-width="18"
                :percentage="Number(productInfo[2].percentage)"
              >
              </el-progress>
              <span>{{ productInfo[2].fact }}吨</span>
              <span :class="productInfo[2].compare < '0' ? 'isred' : ''"
                >{{ productInfo[2].compare }}吨</span
              >
            </li>
          </ul>
        </div>
      </div>
      <div class="border fuse-side_middle" style="margin: 0 0.2rem">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">当年产能比分析</span>
        </div>
        <div class="fuse-main" id="data6"></div>
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">井下人员疑似睡岗统计</span>
        </div>
        <div class="fuse-main" style="padding: 0 0.2rem">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5" style="width:100%">
            <el-table :data="sleeplist" class="backtable" style="width:100%">
              <el-table-column
                prop="psPersonName"
                label="姓名"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="psPersonPost"
                label="岗位"
                show-overflow-tooltip
                align="center"
                v-if="this.csMineCode!='006080012'"
              >
              </el-table-column>
              <el-table-column
                prop="psPersonDuty"
                label="工种"
                show-overflow-tooltip
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="psClassName"
                label="班次"
                show-overflow-tooltip
                align="center"
                v-if="this.csMineCode!='006080012'"
              >
              </el-table-column>
              <el-table-column
                prop="psStationName"
                label="分站名称"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="psStationEntertime"
                label="进站时间"
                show-overflow-tooltip
                width="120"
                align="center"
              >
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div>
    </div>
    <div class="content_middle" style="flex: 1">
      <div class="middleone" style="position: relative">
        <img src="../../../assets/images/img6.png" alt="" />
        <h1>今日安全指数</h1>
        <h2 class="safeG">{{ safeGrade }}</h2>
        <h3 class="bracket">风险等级</h3>
        <div id="data5" style="height: 2rem"></div>
      </div>
      <div class="middletwo">
        <div class="middletwo_left">
          <p>安全风险预警 综合风险得分为100分 风险等级为 低风险</p>
          <div class="data7"></div>
          <p class="text">
            参与评测标准共计35项，人员因素2项，设备因素8项，环境因素7项，管理因素18项，其中重大风险0项，一般风险0项，低风险35项
            详见评测报告
          </p>
        </div>
        <div id="data8" style="height: 2rem"></div>
      </div>
    </div>
    <!-- <div class="content_bom" style="flex: 1">
      <img src="../../../assets/images/img6.png" alt="" />
      <h1>煤矿安全趋势</h1>
      <div class="botm"></div>
    </div> -->

    <div class="content" style="flex: 1">
      <ul>
        <li style="padding: 0.2rem 0.4rem 0 0.4rem">
          <div class="headmodle">
            <img class="topimg" src="../../../assets/images/iocn.png" alt="" />
            <div class="textleft">
              <p>{{ linedata.manage ? linedata.manage.score : '' }}</p>
              <p>管理因素</p>
            </div>
            <div class="textcenter">
              <p>
                <img
                  :src="
                    linedata.manage.dayHb < 0
                      ? require('../../../assets/images/redjt.png')
                      : linedata.manage.dayHb > 0
                      ? require('../../../assets/images/greenjt.png')
                      : linedata.manage.dayHb == '-'
                      ? ''
                      : ''
                  "
                  alt=""
                />
                <span :class="linedata.manage.dayHb < 0 ? 'isred' : ''"
                  >{{ linedata.manage ? linedata.manage.dayHb : '' }}%</span
                >
              </p>
              <p>日环比</p>
            </div>
            <div class="textright">
              <p>
                <img
                  :src="
                    linedata.manage.tongBi < 0
                      ? require('../../../assets/images/redjt.png')
                      : linedata.manage.tongBi > 0
                      ? require('../../../assets/images/greenjt.png')
                      : linedata.manage.tongBi == '-'
                      ? ''
                      : ''
                  "
                  alt=""
                />
                <span :class="linedata.manage.tongBi < 0 ? 'isred' : ''"
                  >{{ linedata.manage ? linedata.manage.tongBi : '' }}%</span
                >
              </p>
              <p>同比</p>
            </div>
          </div>
          <div id="data1" style="height: 1.8rem"></div>
        </li>
        <li style="padding: 0.2rem 0.4rem 0 0.4rem">
          <div class="headmodle">
            <!-- <img class="topimg" src="../../../assets/images/iocn.png" alt="" /> -->
            <div class="textleft">
              <p>
                {{ linedata.environment ? linedata.environment.score : '' }}
              </p>
              <p>环境因素</p>
            </div>
            <div class="textcenter">
              <p>
                <img
                  :src="
                    linedata.environment.dayHb < 0
                      ? require('../../../assets/images/redjt.png')
                      : linedata.environment.dayHb > 0
                      ? require('../../../assets/images/greenjt.png')
                      : linedata.environment.dayHb == '-'
                      ? ''
                      : ''
                  "
                  alt=""
                />
                <span :class="linedata.environment.dayHb < 0 ? 'isred' : ''"
                  >{{
                    linedata.environment ? linedata.environment.dayHb : ''
                  }}%</span
                >
              </p>
              <p>日环比</p>
            </div>
            <div class="textright">
              <p>
                <img
                  :src="
                    linedata.environment.tongBi < 0
                      ? require('../../../assets/images/redjt.png')
                      : linedata.environment.tongBi > 0
                      ? require('../../../assets/images/greenjt.png')
                      : linedata.environment.tongBi == '-'
                      ? ''
                      : ''
                  "
                  alt=""
                />
                <span :class="linedata.environment.tongBi < 0 ? 'isred' : ''"
                  >{{
                    linedata.environment ? linedata.environment.tongBi : ''
                  }}%</span
                >
              </p>
              <p>同比</p>
            </div>
          </div>
          <div id="data2" style="height: 1.8rem"></div>
        </li>
        <li style="padding: 0.2rem 0.4rem 0 0.4rem">
          <div class="headmodle">
            <img class="topimg" src="../../../assets/images/iocn.png" alt="" />
            <div class="textleft">
              <p>{{ linedata.equipment ? linedata.equipment.score : '' }}</p>
              <p>设备因素</p>
            </div>
            <div class="textcenter">
              <p>
                <img
                  :src="
                    linedata.equipment.dayHb < 0
                      ? require('../../../assets/images/redjt.png')
                      : linedata.equipment.dayHb > 0
                      ? require('../../../assets/images/greenjt.png')
                      : linedata.equipment.dayHb == '-'
                      ? ''
                      : ''
                  "
                  alt=""
                />
                <span :class="linedata.equipment.dayHb < 0 ? 'isred' : ''"
                  >{{
                    linedata.equipment ? linedata.equipment.dayHb : ''
                  }}%</span
                >
              </p>
              <p>日环比</p>
            </div>
            <div class="textright">
              <p>
                <img
                  :src="
                    linedata.equipment.tongBi < 0
                      ? require('../../../assets/images/redjt.png')
                      : linedata.equipment.tongBi > 0
                      ? require('../../../assets/images/greenjt.png')
                      : linedata.equipment.tongBi == '-'
                      ? ''
                      : ''
                  "
                  alt=""
                />
                <span :class="linedata.equipment.tongBi < 0 ? 'isred' : ''"
                  >{{
                    linedata.equipment ? linedata.equipment.tongBi : ''
                  }}%</span
                >
              </p>
              <p>同比</p>
            </div>
          </div>
          <div id="data3" style="height: 1.8rem"></div>
        </li>
        <li style="padding: 0.2rem 0.4rem 0 0.4rem">
          <div class="headmodle">
            <img class="topimg" src="../../../assets/images/iocn.png" alt="" />
            <div class="textleft">
              <p>{{ linedata.person ? linedata.person.score : '' }}</p>
              <p>个人因素</p>
            </div>
            <div class="textcenter">
              <p>
                <img
                  :src="
                    linedata.person.dayHb < 0
                      ? require('../../../assets/images/redjt.png')
                      : linedata.person.dayHb > 0
                      ? require('../../../assets/images/greenjt.png')
                      : linedata.person.dayHb == '-'
                      ? ''
                      : ''
                  "
                  alt=""
                />
                <span :class="linedata.person.dayHb < 0 ? 'isred' : ''"
                  >{{ linedata.person ? linedata.person.dayHb : '' }}%</span
                >
              </p>
              <p>日环比</p>
            </div>
            <div class="textright">
              <p>
                <img
                  :src="
                    linedata.person.tongBi < 0
                      ? require('../../../assets/images/redjt.png')
                      : linedata.person.tongBi > 0
                      ? require('../../../assets/images/greenjt.png')
                      : linedata.person.tongBi == '-'
                      ? ''
                      : ''
                  "
                  alt=""
                />
                <span :class="linedata.person.tongBi < 0 ? 'isred' : ''"
                  >{{ linedata.person ? linedata.person.tongBi : '' }}%</span
                >
              </p>
              <p>同比</p>
            </div>
          </div>
          <div id="data4" style="height: 1.8rem"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { HappyScroll } from 'vue-happy-scroll'
import 'vue-happy-scroll/docs/happy-scroll.css'
import { getcsMineCode } from "@/utils/auth";
export default {
  components: {
    HappyScroll
  },
  data() {
    return {
      linedata: {
        manage: {},
        environment: {},
        equipment: {},
        person: {}
      },
      productInfo: [
        {
          type: '',
          percentage: '',
          fact: '',
          compare: ''
        },
        {
          type: '',
          percentage: '',
          fact: '',
          compare: ''
        },
        {
          type: '',
          percentage: '',
          fact: '',
          compare: ''
        }
      ],
      sleeplist: [],
      yield: {},
      safeGrade: '',
      csMineCode:getcsMineCode()
    }
  },
  mounted() {
    this.getline()
    this.getsafe()
    this.getdata8()
    this.getproductInfo()
    this.getdata1()
    this.getSleeping()
  },
  methods: {
    // 当年产量超减情况分析
    getproductInfo() {
      this.$http.get('/SysBigData/SysBigData/analysisList').then(res => {
        // res = res.data
        if (res.code == 200 && res.data != '') {
          this.productInfo = res.data.list
          this.yield = res.data
        }
      })
    },
    // 当年产能比分析
    getdata1() {
      this.$http.get('/SysBigData/SysBigData/gisYearList').then(res => {
        if (res.code === 200) {
          var chart6 = echarts.init(document.getElementById('data6'))
          var option6 = {
            backgroundColor: '#080b3000',
            tooltip: {
              trigger: 'axis'
              // formatter: function(prams) {
              //   return (
              //     prams[0].name + '\n' + '\n' + '报警数量：' + prams[0].value + '个'
              //   )
              // }
            },
            grid: {
              top: '25%',
              width: '82%',
              height: '60%',
              bottom: '15%'
            },
            legend: {
              show: true,
              top: '5%',
              right: '10%',
              icon: 'circle',
              textStyle: {
                color: '#d4e3e6'
              }
            },
            xAxis: [
              {
                type: 'category',
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#00c7ff',
                    width: 1,
                    type: 'solid'
                  }
                },
                axisTick: {
                  show: true
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#00c7ff'
                  }
                },
                boundaryGap: false,
                data: res.data.time
              }
            ],
            yAxis: [
              {
                type: 'value',
                min: 0,
                max: 100,
                name: '',
                nameTextStyle: {
                  color: '#d2d2d2',
                  fontSize: 14,
                  padding: [0, 0, 20, -50]
                },
                splitNumber: 5,
                axisLabel: {
                  margin: 20,
                  textStyle: {
                    color: '#00c7ff'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#00c7ff',
                    width: 1,
                    type: 'solid'
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: '#0F55B9'
                  }
                }
              }
            ],
            series: [
              {
                name: '产量',
                type: 'line',
                // symbol: 'none',  //取消折点圆圈
                smooth: 'false',
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 12,
                itemStyle: {
                  color: '#f5e341',
                  borderColor: '#fff',
                  borderWidth: 2
                },
                lineStyle: {
                  width: 4,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#152a3f'
                    },
                    {
                      offset: 1,
                      color: '#f5e341'
                    }
                  ]),
                  shadowColor: '#f5e341',
                  shadowBlur: 40
                },
                tooltip: {
                  show: true
                },
                data: res.data.omOutPutMonth
              },
              {
                name: '能效比',
                type: 'line',
                // symbol: 'none',  //取消折点圆圈
                smooth: 'false',
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 12,
                itemStyle: {
                  color: '#207442',
                  borderColor: '#fff',
                  borderWidth: 2
                },
                lineStyle: {
                  width: 4,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#47f70e'
                    },
                    {
                      offset: 1,
                      color: '#207442'
                    }
                  ]),
                  shadowColor: '#207442',
                  shadowBlur: 40
                },
                tooltip: {
                  show: true
                },
                data: res.data.omRatioMonth
              }
            ]
          }
          chart6.setOption(option6)
        }
      })
    },
    // 井下人员疑似睡岗
    getSleeping() {
      this.$http.get('/SysBigData/SysBigData/sleepList').then(res => {
        if (res.code == 200) {
          this.sleeplist = res.data
        }
      })
    },
    // 安全风险预警
    getdata8() {
      this.$http.get('/SysBigData/SysBigData/totalScore').then(res => {
        if (res.code === 200) {
          var chart8 = echarts.init(document.getElementById('data8'))
          // var value = res.data.avgScore
          var myRate1 = 100
          var option8 = {
            title: [
              {
                x: '40%',
                bottom: 10,
                text: '安全指数',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 20,
                  color: '#fff'
                }
              }
            ],
            tooltip: {
              show: true
            },
            series: [
              {
                type: 'gauge',
                center: ['50%', '55%'], // 默认全局居中
                radius: '70%',
                splitNumber: 10, // 刻度数量
                min: 0,
                max: 100,
                startAngle: 220,
                endAngle: -40,
                clockwise: true,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [[1, '#03B7C9']]
                  }
                },
                axisTick: {
                  show: true,
                  lineStyle: {
                    color: '#03B7C9',
                    width: 1
                  },
                  length: -10,
                  splitNumber: 10
                },
                splitLine: {
                  show: true,
                  length: -15,
                  lineStyle: {
                    color: '#03B7C9'
                  }
                },
                axisLabel: {
                  distance: -20,
                  textStyle: {
                    color: '#03B7C9',
                    fontSize: '15',
                    fontWeight: 'bold'
                  }
                },
                pointer: {
                  // 仪表盘指针
                  show: 0,
                  show: false
                },
                detail: {
                  show: false
                },
                data: [
                  {
                    name: '',
                    value: myRate1
                  }
                ]
              },
              {
                startAngle: 220,
                endAngle: -40,
                type: 'gauge',
                center: ['50%', '55%'], // 默认全局居中
                radius: '60%',
                min: 0,
                max: 1000,
                splitNumber: 0,
                axisLine: {
                  // 坐标轴线
                  lineStyle: {
                    color: [
                      [0.66, '#dddddd'],
                      [1, '#dddddd']
                    ], // 属性lineStyle控制线条样式
                    width: 3
                  }
                },

                axisLabel: {
                  // 坐标轴小标记
                  textStyle: {
                    // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    fontSize: 16,
                    color: 'rgba(30,144,255,0)'
                  }
                },
                splitLine: {
                  // 分隔线
                  length: 10, // 属性length控制线长
                  lineStyle: {
                    // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 0,
                    color: '#444'
                  }
                },
                pointer: {
                  show: false,
                  // 分隔线 指针
                  color: '#666666',
                  width: 0,
                  length: 230
                },
                detail: {
                  show: false
                }
              },
              {
                name: '安全指数',
                type: 'gauge',
                startAngle: 220,
                endAngle: -40,
                radius: '50%',
                center: ['50%', '55%'], // 默认全局居中
                min: 0,
                max: 100,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 8,
                    shadowBlur: 0,
                    color: [
                      [0.45, '#d9001b'],
                      [0.75, '#f59a23'],
                      [0.85, '#ffff00'],
                      [1, '#00ffff']
                    ]
                  }
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false,
                  length: 20
                },

                axisLabel: {
                  show: false
                },
                pointer: {
                  show: false
                },
                detail: {
                  show: true,
                  offsetCenter: [0, '0%'],
                  textStyle: {
                    fontSize: 24
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#03B7C9'
                  }
                },
                data: [
                  {
                    value: res.data.avgScore
                  }
                ]
              }
            ]
          }

          chart8.setOption(option8)
        }
      })
    },
    // 今日安全指数
    getsafe() {
      this.$http.get('/SysBigData/SysBigData/totalScore').then(res => {
        if (res.code === 200) {
          var chart5 = echarts.init(document.getElementById('data5'))
          if (parseInt(res.data.avgScore) < 45) {
            this.safeGrade = '最大'
          } else if (
            parseInt(res.data.avgScore) > 45 &&
            parseInt(res.data.avgScore) < 75
          ) {
            this.safeGrade = '较大'
          } else if (
            parseInt(res.data.avgScore) > 75 &&
            parseInt(res.data.avgScore) < 85
          ) {
            this.safeGrade = '一般'
          } else {
            this.safeGrade = '低'
          }
          var data = ''
          var dataArr = res.data.avgScore
          if (data == undefined) {
            dataArr = 0
          }
          var colorSet = {
            color: '#468EFD'
          }
          // var text

          var option5 = {
            backgroundColor: '#0000',
            title: {
              show: true,
              text: '',
              x: '49%',
              y: '55%',
              z: 8,
              textAlign: 'center',
              textStyle: {
                color: ' rgb(147,169,205) ',
                fontSize: 26
              }
            },
            grid: {
              height: '100%'
              // top:'10'
            },
            series: [
              {
                name: '内部进度条',
                type: 'gauge',
                center: ['65%', '50%'],
                radius: '68%',

                splitNumber: 10,
                axisLine: {
                  lineStyle: {
                    color: [
                      [dataArr / 100, colorSet.color],
                      [1, '#111F42']
                    ],
                    width: 8
                  }
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },

                pointer: {
                  show: false
                }
              },
              {
                name: '',
                type: 'gauge',
                center: ['65%', '50%'],
                radius: '90%',
                min: 0, // 最小刻度
                max: 100, // 最大刻度
                splitNumber: 10, // 刻度数量
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 1,
                    color: [[1, 'rgba(0,0,0,0)']]
                  }
                },
                // 仪表盘轴线
                axisLabel: {
                  show: true,
                  color: '#4d5bd1',
                  distance: 25,
                  formatter: function(v) {
                    switch (v + '') {
                      case '0':
                        return '0'
                      case '10':
                        return '10'
                      case '20':
                        return '20'
                      case '30':
                        return '30'
                      case '40':
                        return '40'
                      case '50':
                        return '50'
                      case '60':
                        return '60'
                      case '70':
                        return '70'
                      case '80':
                        return '80'
                      case '90':
                        return '90'
                      case '100':
                        return '100'
                    }
                  }
                }, // 刻度标签。
                axisTick: {
                  show: true,
                  splitNumber: 7,
                  lineStyle: {
                    color: colorSet.color, // 用颜色渐变函数不起作用
                    width: 1
                  },
                  length: -8
                }, // 刻度样式
                splitLine: {
                  show: true,
                  length: -20,
                  lineStyle: {
                    color: colorSet.color // 用颜色渐变函数不起作用
                  }
                }, // 分隔线样式
                detail: {
                  show: false
                },
                pointer: {
                  show: false
                }
              },
              /* 内部*/
              {
                type: 'pie',
                radius: ['0', '35%'],
                center: ['65%', '50%'],
                z: 8,
                hoverAnimation: false,
                data: [
                  {
                    name: '',
                    value: res.data.avgScore,
                    itemStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {
                            offset: 0,
                            color: '#4FADFD'
                          },
                          {
                            offset: 1,
                            color: '#28E8FA'
                          }
                        ])
                      }
                    },
                    label: {
                      normal: {
                        rich: {
                          a: {
                            color: '#fff',
                            align: 'center',
                            fontSize: 34,
                            fontWeight: 'bold'
                          }
                        },
                        formatter: function(params) {
                          return '{a|' + params.value + '}'
                        },
                        position: 'center',
                        show: true
                      }
                    },
                    labelLine: {
                      show: false
                    }
                  }
                ]
              },
              /* 外一层*/
              {
                type: 'pie',
                radius: '40%',
                startAngle: 220,
                endAngle: -40,
                hoverAnimation: false,
                center: ['65%', '50%'],
                avoidLabelOverlap: false,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                data: [
                  {
                    value: 1
                  }
                ],
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(69, 161, 255,0.8)'
                        },
                        {
                          offset: 1,
                          color: 'rgba(69, 161, 255,0.5)'
                        }
                      ]
                    }
                  }
                }
              },
              // 外二层圈
              {
                type: 'pie',
                radius: '45%',
                center: ['65%', '50%'],
                avoidLabelOverlap: false,
                z: 0,
                hoverAnimation: false,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                data: [
                  {
                    value: 1
                  }
                ],
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(69, 161, 255,0.5)'
                        },
                        {
                          offset: 1,
                          color: 'rgba(69, 161, 255,0.3)'
                        }
                      ]
                    }
                  }
                }
              },
              // 最外层圈
              {
                type: 'pie',
                radius: '50%',
                center: ['65%', '50%'],
                avoidLabelOverlap: false,
                z: 0,
                hoverAnimation: false,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                data: [
                  {
                    value: 1
                  }
                ],
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(69, 161, 255,0.3)'
                        },
                        {
                          offset: 1,
                          color: 'rgba(69, 161, 255,0)'
                        }
                      ]
                    }
                  }
                }
              }
            ]
          }

          chart5.setOption(option5)
        }
      })
    },
    // 顶部四个折线图
    getline() {
      this.$http.get('/SysBigData/SysBigData/bigDataCount').then(res => {
        if (res.code === 200) {
          this.linedata = res.data
          var chart1 = echarts.init(document.getElementById('data1'))
          const bgColor = '#04081100'
          const color = [
            '#0090FF',
            '#36CE9E',
            '#EE8931',
            '#FF515A',
            '#8B5CFF',
            '#00CA69'
          ]
          const legendItem = []
          const xAxisData = res.data.manage.dateList
          const yAxisData1 = res.data.manage.scoreList
          const hexToRgba = (hex, opacity) => {
            let rgbaColor = ''
            const reg = /^#[\da-f]{6}$/i
            if (reg.test(hex)) {
              rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
                '0x' + hex.slice(3, 5)
              )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
            }
            return rgbaColor
          }

          var option1 = {
            backgroundColor: bgColor,
            color: color,
            legend: {
              center: true,
              top: 10,
              data: legendItem,
              textStyle: {
                color: '#00DEFF'
              }
            },
            tooltip: {
              trigger: 'axis',
              formatter: function(params) {
                let html = ''
                params.forEach(v => {
                  console.log(v)
                  html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
  color[v.componentIndex]
};"></span>
                ${v.seriesName}.${v.name}
                <span style="color:${
  color[v.componentIndex]
};font-weight:700;font-size: 18px">${v.value}</span>
                `
                })

                return html
              },
              extraCssText:
                'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;'
            },
            grid: {
              top: 30,
              left: '0.5%',
              width: '100%',
              height: '80%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisLabel: {
                  inside: false,
                  textStyle: {
                    color: 'rgba(255, 255, 255,0.7)', // x轴颜色
                    fontWeight: 'normal',
                    fontSize: '14',
                    lineHeight: 22
                  }
                },

                data: xAxisData
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '(t)',
                axisLabel: {
                  textStyle: {
                    color: 'rgba(255, 255, 255,0.7)'
                  }
                },
                nameTextStyle: {
                  color: 'rgba(255, 255, 255,0.7)',
                  fontSize: 12,
                  lineHeight: 40,
                  padding: [0, 0, 0, -20]
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisTick: {
                  show: false
                }
              }
            ],
            series: [
              {
                name: '',
                type: 'line',
                smooth: true, // 是否平滑
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: color[0],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[0], 0.5),
                    shadowOffsetY: 8
                  }
                },
                data: yAxisData1
              }
            ]
          }

          chart1.setOption(option1)

          var chart2 = echarts.init(document.getElementById('data2'))
          const xAxisData2 = res.data.environment.dateList
          const yAxisData2 = res.data.environment.scoreList
          // [133,133,100,80,99,133,110,80]
          const hexToRgba2 = (hex, opacity) => {
            let rgbaColor = ''
            const reg = /^#[\da-f]{6}$/i
            if (reg.test(hex)) {
              rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
                '0x' + hex.slice(3, 5)
              )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
            }
            return rgbaColor
          }

          var option2 = {
            backgroundColor: bgColor,
            color: color,
            legend: {
              center: true,
              top: 10,
              data: legendItem,
              textStyle: {
                color: '#00DEFF'
              }
            },
            // calculable: true,
            tooltip: {
              trigger: 'axis',
              formatter: function(params) {
                let html = ''
                params.forEach(v => {
                  console.log(v)
                  html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[1]};"></span>
                ${v.seriesName}.${v.name}
                <span style="color:${color[1]};font-weight:700;font-size: 18px">${v.value}</span>
                `
                })

                return html
              },
              extraCssText:
                'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;'
            },
            grid: {
              top: 30,
              left: '0.5%',
              width: '100%',
              height: '80%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisLabel: {
                  inside: false,
                  textStyle: {
                    color: 'rgba(255, 255, 255,0.7)', // x轴颜色
                    fontWeight: 'normal',
                    fontSize: '14',
                    lineHeight: 22
                  }
                },

                data: xAxisData2
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '(t)',
                axisLabel: {
                  textStyle: {
                    color: 'rgba(255, 255, 255,0.7)'
                  }
                },
                nameTextStyle: {
                  color: 'rgba(255, 255, 255,0.7)',
                  fontSize: 12,
                  lineHeight: 40,
                  padding: [0, 0, 0, -20]
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisTick: {
                  show: false
                }
              }
            ],
            series: [
              {
                name: '',
                type: 'line',
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: color[1],
                    shadowBlur: 3,
                    shadowColor: hexToRgba2(color[1], 0.5),
                    shadowOffsetY: 8
                  }
                },
                data: yAxisData2
              }
            ]
          }

          chart2.setOption(option2)

          // 第三个折线
          var chart3 = echarts.init(document.getElementById('data3'))

          const xAxisData3 = res.data.equipment.dateList
          const yAxisData3 = res.data.equipment.scoreList
          const hexToRgba3 = (hex, opacity) => {
            let rgbaColor = ''
            const reg = /^#[\da-f]{6}$/i
            if (reg.test(hex)) {
              rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
                '0x' + hex.slice(3, 5)
              )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
            }
            return rgbaColor
          }

          var option3 = {
            backgroundColor: bgColor,
            color: color,
            legend: {
              center: true,
              top: 10,
              data: legendItem,
              textStyle: {
                color: '#00DEFF'
              }
            },
            // calculable: true,
            tooltip: {
              trigger: 'axis',
              formatter: function(params) {
                let html = ''
                params.forEach(v => {
                  console.log(v)
                  html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[2]};"></span>
                ${v.seriesName}.${v.name}
                <span style="color:${color[2]};font-weight:700;font-size: 18px">${v.value}</span>
                `
                })

                return html
              },
              extraCssText:
                'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;'
            },
            grid: {
              top: 30,
              left: '0.5%',
              width: '100%',
              height: '80%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisLabel: {
                  inside: false,
                  textStyle: {
                    color: 'rgba(255, 255, 255,0.7)', // x轴颜色
                    fontWeight: 'normal',
                    fontSize: '14',
                    lineHeight: 22
                  }
                },

                data: xAxisData3
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '(t)',
                axisLabel: {
                  textStyle: {
                    color: 'rgba(255, 255, 255,0.7)'
                  }
                },
                nameTextStyle: {
                  color: 'rgba(255, 255, 255,0.7)',
                  fontSize: 12,
                  lineHeight: 40,
                  padding: [0, 0, 0, -20]
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisTick: {
                  show: false
                }
              }
            ],
            series: [
              {
                name: '',
                type: 'line',
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: color[2],
                    shadowBlur: 3,
                    shadowColor: hexToRgba3(color[2], 0.5),
                    shadowOffsetY: 8
                  }
                },
                data: yAxisData3
              }
            ]
          }

          chart3.setOption(option3)

          // 第四个折线
          var chart4 = echarts.init(document.getElementById('data4'))

          const xAxisData4 = res.data.person.dateList
          const yAxisData4 = res.data.person.scoreList
          const hexToRgba4 = (hex, opacity) => {
            let rgbaColor = ''
            const reg = /^#[\da-f]{6}$/i
            if (reg.test(hex)) {
              rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
                '0x' + hex.slice(3, 5)
              )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
            }
            return rgbaColor
          }

          var option4 = {
            backgroundColor: bgColor,
            color: color,
            legend: {
              center: true,
              top: 10,
              data: legendItem,
              textStyle: {
                color: '#00DEFF'
              }
            },
            // calculable: true,
            tooltip: {
              trigger: 'axis',
              formatter: function(params) {
                let html = ''
                params.forEach(v => {
                  console.log(v)
                  html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[3]};"></span>
                ${v.seriesName}.${v.name}
                <span style="color:${color[3]};font-weight:700;font-size: 18px">${v.value}</span>
                `
                })

                return html
              },
              extraCssText:
                'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;'
            },
            grid: {
              top: 30,
              left: '0.5%',
              width: '100%',
              height: '80%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisLabel: {
                  inside: false,
                  textStyle: {
                    color: 'rgba(255, 255, 255,0.7)', // x轴颜色
                    fontWeight: 'normal',
                    fontSize: '14',
                    lineHeight: 22
                  }
                },

                data: xAxisData4
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '(t)',
                axisLabel: {
                  textStyle: {
                    color: 'rgba(255, 255, 255,0.7)'
                  }
                },
                nameTextStyle: {
                  color: 'rgba(255, 255, 255,0.7)',
                  fontSize: 12,
                  lineHeight: 40,
                  padding: [0, 0, 0, -20]
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255,0.5)'
                  }
                },
                axisTick: {
                  show: false
                }
              }
            ],
            series: [
              {
                name: '',
                type: 'line',
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: color[3],
                    shadowBlur: 3,
                    shadowColor: hexToRgba4(color[3], 0.5),
                    shadowOffsetY: 8
                  }
                },
                data: yAxisData4
              }
            ]
          }

          chart4.setOption(option4)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bigdata {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../../../assets/images/back.png') no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .content {
    background: url('../../../assets/images/imglong.png') no-repeat;
    background-size: 100% 100%;
    margin: 0 0.1rem 0.2rem 0.1rem;
    padding: 0.1rem;
    display: flex;
    justify-content: space-between;
    img {
      width: 0.4rem;
    }
    h1 {
      display: inline-block;
      vertical-align: top;
      margin-top: 0.13rem;
      font-size: 0.18rem;
      color: #fff;
    }
    ul {
      display: flex;
      justify-content: center;
      width: 100%;
      li {
        width: 25%;
        // background: #fff2;
        padding: 0.2rem 0.4rem;
        text-align: center;
        .headmodle {
          display: flex;
          // justify-content: space-evenly;
          height: 0.7rem;
          background: url('../../../assets/images/titlekuang.png') no-repeat;
          background-size: 100% 100%;
          padding-top: 0.16rem;
          padding-left: 0.5rem;
          .topimg {
            width: 0.3rem;
            height: 0.3rem;
            margin-top: 0.03rem;
          }
          .textleft {
            margin-left: 0.25rem;
            p:nth-child(1) {
              font-size: 0.24rem;
              color: #00f6ff;
            }
            p:nth-child(2) {
              font-size: 0.12rem;
              color: #fff;
              margin-top: 0.03rem;
            }
          }
          .textcenter {
            img {
              width: 0.13rem;
              height: 0.18rem;
            }
            p {
              font-size: 0.12rem;
              color: #fff;
              margin-top: 0.03rem;
            }
            p:nth-child(1) {
              color: #39f6b2;
            }
          }
          .textright {
            img {
              width: 0.13rem;
              height: 0.18rem;
            }
            p {
              font-size: 0.12rem;
              color: #fff;
              margin-top: 0.03rem;
            }
            p:nth-child(1) {
              color: #39f6b2;
            }
          }
          div {
            margin-right: 0.25rem;
          }
        }
      }
    }
  }
  .content_bom {
    background: url('../../../assets/images/imglong.png') no-repeat;
    background-size: 100% 100%;
    margin: 0 0.1rem 0.2rem 0.1rem;
    padding: 0.1rem;
    img {
      width: 0.4rem;
    }
    h1 {
      display: inline-block;
      vertical-align: top;
      margin-top: 0.13rem;
      font-size: 0.18rem;
      color: #fff;
    }
    .botm {
      display: flex;
      #data6 {
        width: 73%;
      }
    }
  }

  .content_middle {
    margin: 0 0.1rem 0.2rem 0.1rem;
    display: flex;
    justify-content: space-between;
    .middleone {
      width: 32.6%;
      background: url('../../../assets/images/img13.png') no-repeat;
      background-size: 100% 100%;
      padding: 0.1rem;
      img {
        width: 0.4rem;
      }
      h1 {
        display: inline-block;
        vertical-align: top;
        margin-top: 0.13rem;
        font-size: 0.18rem;
        color: #fff;
      }
    }
    .middletwo {
      width: 66.3%;
      background: url('../../../assets/images/imglong.png') no-repeat;
      background-size: 100% 100%;
      padding: 0.2rem;
      padding-top: 0.4rem;
      display: flex;
      .middletwo_left {
        margin-left: 0.3rem;
        width: 60%;
        p:nth-child(1) {
          font-size: 0.18rem;
          color: #00f6ff;
        }
        .text {
          font-size: 0.14rem;
          color: #fff;
          line-height: 0.17rem;
        }
        .data7 {
          height: 0.8rem;
          margin: 0.3rem 0;
          background: url('../../../assets/images/level.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      #data8 {
        width: 40%;
      }
    }
  }
}
.manufacture {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  & > li:not(:last-child) {
    margin-bottom: 0.05rem;
  }
  li {
    display: flex;
    width: 100%;
    height: 0.25rem;

    .el-progress {
      width: 50%;
    }

    span:first-child {
      display: inline-block;
      width: 15%;
      text-align: center;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: #fff;
    }
    span:nth-child(3) {
      display: inline-block;
      width: 18%;
      text-align: center;
      line-height: 0.2rem;
      font-size: 0.14rem;
    }
    span:nth-child(4) {
      display: inline-block;
      width: 15%;
      text-align: center;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: rgb(37, 195, 98);
    }
  }
  li:first-child {
    margin-top: 0.1rem;
    ::v-deep .el-progress-bar__inner {
      border: 1px solid #04b2f7;
      background-color: #116be0d9;
    }
    & > span:nth-child(3) {
      color: #04b2f7;
    }
  }
  li:nth-child(2) {
    ::v-deep .el-progress-bar__inner {
      border: 1px solid #dbf704;
      background-color: #bdaa11c0;
    }
    & > span:nth-child(3) {
      color: #dbf704;
    }
  }
  li:nth-child(3) {
    ::v-deep .el-progress-bar__inner {
      border: 1px solid #04f79a;
      background-color: #128b67c0;
    }
    & > span:nth-child(3) {
      color: #04f79a;
    }
  }
  ::v-deep .el-progress-bar__outer {
    background-color: #0e365890 !important;
    border: 1px solid #182b44 !important;
  }
}
.isred {
  color: red !important;
}
.yield {
  display: flex;
  li {
    flex: 1;
    text-align: center;
    color: #fff;
    img {
      width: 0.5rem;
      height: 0.5rem;
    }
    p {
      line-height: 0.25rem;
      font-size: 0.14rem;
    }
    h1 {
      line-height: 0.25rem;
      font-size: 0.2rem;
      font-weight: 600;
      color: #08b4db;
      span {
        font-size: 0.12rem;
      }
    }
  }
}
.safeG {
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.2rem;
  width: 1rem;
  height: 1rem;
  background: url('../../../assets/images/img75.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 1rem;
}
.bracket{
  position: absolute;
    top: 2rem;
    left: 1.15rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.16rem;
    letter-spacing: 1px;
}
::v-deep .happy-scroll-content{
  width:100%
}
</style>